/**
 *Filename: user_flow.scss
 *Author: xhh
 *Description: 结算页，还没有编译的文件，用的是sass语法写
 *Date: 2018.03.30
 */
// 引入统一，清除各浏览器的默认和差异性
@import "reset.scss";
// 引入公用
@import "base.scss";

/* 购物车主体 start */
.shopping-cart-container {
    margin-top: 6rem;
    .shopping-cart-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #959595;
        h2 {
            font-size: 2rem;
        }
    }
     // 购物车
    .shopping-cart-diamond {
        margin-top: 1.6rem;
        // 头部参数说明
        .shopping-cart-header {
            display: flex;
            justify-content: space-around;
            line-height: 3.2;
            font-weight: 600;
            font-size: .875rem;
            text-transform: capitalize;
            color: #000;
            background-color: #f3f4f3;
            text-align: center;
            .prod {
                width: 26%;
                text-align: left;
                padding-left: 2%;
            }
            .param {
                width: 24%;
            }
            .num {
                width: 19%;
            }
            .total {
                width: 17%;
            }
            .select {
                width: 12%;
            }
        }
        //钻石列表
        .shopping-cart-content {
            display: flex;
            flex-direction: column;
            padding-bottom: 3rem;
            border: 1px solid #dadada;
        }
        // 包裹列表的盒子
        .shopping-cart-list {
            width: 100%;
            max-height: 720px;
            overflow-y: auto;
            // 每一颗钻石
            .shopping-cart-item {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                border-left: 4px solid #fff;
                line-height: 6;
                font-size: .875rem;
                text-align: center;
                .item-prod {
                    display: flex;
                    align-items: center;
                    width: 26%;
                    padding-left: 2%;
                    line-height: 1.2;
                    font-size: .875rem;
                    text-align: left;
                    // 钻石图片
                    img {
                        padding: .2rem;
                        border: 1px solid #dadada;
                    }
                    // 钻石名称
                    h3 {
                        max-width: 55%;
                        margin-left: .4rem;
                    }
                }
                // 参数
                .item-param {
                    width: 24%;
                    display: flex;
                    justify-content: space-around;
                    text-transform: capitalize;
                }
                // 数量
                .item-num {
                    width: 19%;
                    display: flex;
                    justify-content: center;
                    .num-box {
                        display: flex;
                        justify-content: space-between;
                        width: 5rem;
                        padding: .3rem 0;
                        border: 1px solid #dadada;
                    }
                    input {
                        width: 70%;
                        text-align: center;
                        line-height: 1.5;
                        outline: none;
                        border: 0 none;
                    }
                    span {
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        align-items: center;
                        width: 30%;
                        i {
                            display: inline-block;
                            width: 13px;
                            height: 7px;
                            background-size: cover;   
                            cursor: pointer;                         
                        }
                        .icon-up {
                            background: url(../img/user/icon_up.png) no-repeat center;
                        }
                        .icon-down {
                            background: url(../img/user/icon_down.png) no-repeat center;
                            
                        }
                    }
                }
                // 总价
                .item-total {
                    width: 17%;
                    color: #999;
                }
                .item-select {
                    width: 12%;
                    a {
                        display: inline-block;
                        width: 12px;
                        height: 12px;
                        border: 1px solid #dadada;
                    }
                    .selected {
                        background: url(../img/user/icon_select.png) no-repeat center;
                        border: 1px solid #000;
                        background-size: cover;
                    }
                }
                // li标签的下划线
                &::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 3%;
                    width: 92%;
                    height: 1px;
                    background-color: #dadada;
                }
            }
        }
    }
    // 底部结算总价 
    .shopping-cart-footer {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        margin-top: .8rem;
        text-transform: capitalize;
        .total-content {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            width: 26%;
            padding-right: 5%;
            font-size: .875rem;
            div {
                display: flex;
                justify-content: space-between;
                width: 100%;
                line-height: 2.6;
                border-bottom: 1px solid #dadada;
                color: #777;
            }
            .total {
                span {
                    &:last-child{
                        color: #be926f;
                        font-weight: 600;
                    }
                }
            }
            a {
                width: 50%;
                padding: .8rem 1rem;
                border-radius: 20px;
                margin-top: 1rem;
                text-transform: uppercase;
                font-weight: 600;
                font-size: .75rem;
                text-align: center;
                color: #fff;
                background-color: #be926f;
                &:hover {
                    background-color: #c4712e;
                }
            }
        }
        .total-title {
            width: 100%;
            font-size: 1rem;
            line-height: 2.6;
            border-bottom: 1px solid #dadada;
        }
        
    }
}
/* 购物车主体 end */